<template>
  <div class="dashboard-container">
    <!-- 卡片区域 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>

      <el-form :rules="rules" :model="ruleForm" ref="ruleFormRef" size="small">
        <el-form-item label="学科:" prop="subjectID" label-width="100px">
          <el-select
            v-model="ruleForm.subjectID"
            placeholder="请选择"
            style="width: 400px"
            @change="getCatalog"
          >
            <el-option
              v-for="(item, index) in mylist"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>          
        </el-form-item>

        <el-form-item label="目录:" prop="catalogID" label-width="100px">
          <el-select
            placeholder="请选择"
            v-model="ruleForm.catalogID"
            style="width: 400px"
          >
            <el-option
              v-for="(item, index) in mygetCatalog"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业:" prop="enterpriseID" label-width="100px">
          <el-select
            placeholder="请选择"
            v-model="ruleForm.enterpriseID"
            style="width: 400px"
          >
            <el-option
              v-for="(item, index) in myenterprise"
              :key="index"
              :label="item.shortName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市:" prop="provinceID" label-width="100px">
              <el-select
                placeholder="请选择"
                style="width: 240px;margin-right:5px"
                v-model="ruleForm.provinceID"
                @change="provinceChange"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in myprovince"
                  :key="index"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                style="width: 155px"
                v-model="ruleForm.cityID"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in mycitys"
                  :key="index"
                ></el-option>
              </el-select>
        </el-form-item>

        <el-form-item label="方向:" prop="directionID" label-width="100px">
          <el-select
            placeholder="请选择"
            v-model="ruleForm.directionID"
            style="width: 400px"
          >
            <el-option
              v-for="(item, index) in direction"
              :key="item.index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题型:" prop="questionTypeID" label-width="100px">
            <el-radio
              v-for="(item, index) in questionType"
              :key="index"
              v-model="ruleForm.questionTypeID"
              :label="item.value"
              @change="chooseQuestion"
            >{{item.label}}</el-radio>
        </el-form-item>

        <el-form-item label="难度:" prop="difficultyID" label-width="100px">
            <el-radio
              v-for="(item, index) in difficulty"
              :key="index"
              v-model="ruleForm.difficultyID"
              :label="item.value"
            >{{item.label}}</el-radio>
        </el-form-item>

        <el-form-item label="题干:" prop="stemID" height="300" label-width="100px">
          <quill-editor v-model="ruleForm.stemID"></quill-editor>
        </el-form-item>

        <!-- 单选框 -->
        <el-form-item
          v-show="ruleForm.questionTypeID === 1"
          v-for="(item1, index1) in items"
          :label="index1 === 0 ? '选项:' : ''"
          :key="index1"
          label-width="100px"
        > 
            <el-radio v-model="item1.isRight" :label="1">{{item1.code + ':'}}</el-radio>
            <el-input class="radio-input" v-model="item1.title"></el-input>
        </el-form-item>

        <!-- 复选框 -->
        <el-form-item
          v-show="ruleForm.questionTypeID === 2"
          v-for="(item2, index2) in items"
          :label="index2 === 0 ? '选项:' : ''"
          :key="'info-' + index2"
          label-width="100px"
        >
            <el-checkbox v-model="item2.isRight === 1 ? true : false">{{item2.code + ':'}}</el-checkbox>
            <el-input class="checkbox-input" v-model="item2.title"></el-input>
        </el-form-item>

        <!-- 增加选项按钮 -->
        <el-form-item v-show="ruleForm.questionTypeID !== 3" label-width="100px">
          <el-button
            class="addbtn"
            :disabled="ruleForm.questionTypeID === 1 ? true : false"
            @click="addBtn"
            >+增加选项与答案</el-button
          >
        </el-form-item>

        <el-form-item label="解析视频:" label-width="100px">
          <el-input style="width: 400px" v-model="ruleForm.videoID"></el-input>
        </el-form-item>

        <el-form-item label="答案解析:" prop="analysisID" label-width="100px">
          <quill-editor v-model="ruleForm.analysisID"></quill-editor>
        </el-form-item>

        <el-form-item label="题目备注:" label-width="100px">
          <el-input style="width: 400px" type="textarea" :rows="2" v-model="ruleForm.remarksID"> </el-input>
        </el-form-item>
        
        <el-form-item label="试题标签:" label-width="100px">
          <el-select multiple v-model="ruleForm.tagID" placeholder="请选择" style="width: 400px">
            <el-option
              v-for="(item, index) in mytags"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
            v-if="parameter === null"
            class="submitbtn"
            type="primary"
            @click="addForm"
          >确认添加
        </el-button>
        <el-button
            v-else
            class="submitbtn"
            type="success"
            @click="updateForm"
          >确认修改
        </el-button>
        </el-form-item>
        
      </el-form>
    </el-card>
  </div>
</template>

   

<script>
import { simple as subject} from "../../api/hmmm/subjects.js";
import { list as catalog } from "../../api/hmmm/directorys.js";
import { provinces, citys } from "../../api/hmmm/citys.js";
import { list as companys } from "../../api/hmmm/companys";
import { questionType, direction, difficulty } from "../../api/hmmm/constants";
import { simple as taglist } from "../../api/hmmm/tags";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { detail } from "../../api/hmmm/questions"
import { update } from "../../api/hmmm/questions"
import { add } from "../../api/hmmm/questions"

export default {
  name: "QuestionsNew",
  components: {
    quillEditor,
  },
  data() {
    return {
      ruleForm: {  
        subjectID: "",
        catalogID: "",
        enterpriseID: "",
        provinceID: "",
        cityID: "",
        directionID: "",
        questionTypeID: 1,
        difficultyID: 1,
        stemID: "",
        videoID: "",
        analysisID: "",
        remarksID: "",
        tagID: [],
      },
      parameter: null, 
      items: [{code: "A"}, {code: "B"}, {code: "C"}, {code: "D"}],
      myindex: "D",
      //学科列表
      mylist: [],
      // 目录列表
      mygetCatalog: [],
      //   省份，城市列表
      myprovince: [],
      mycitys: [],
      // 企业列表
      myenterprise: [],
      mytags: [],
      // 通用常量
      direction,
      questionType,
      difficulty,
      // 验证规则
      rules: {
        subjectID: [
          { required: true, message: "请选择学科", trigger: "blur" },
        ],
        catalogID: [
          { required: true, message: "请选择目录", trigger: "blur" },
        ],
        enterpriseID: [
          { required: true, message: "请选择企业", trigger: "blur" },
        ],
        provinceID: [
          { required: true, message: "请选择城市", trigger: "blur" },
        ],
        directionID: [
          { required: true, message: "请选择方向", trigger: "blur" },
        ],
        questionTypeID: [
          { required: true, message: "请选择题型", trigger: "blur" },
        ],
        difficultyID: [
          { required: true, message: "请选择难度", trigger: "blur" },
        ],
        stemID: [
          { required: true, message: "请输入题目", trigger: "blur" },
        ],
        analysisID: [
          { required: true, message: "请输入答案", trigger: "blur" },
        ],
      },
    };
  },

  created() {
      this.getlist(),
    //   this.getCatalog(),
      this.getEnterprise(),
      this.getProvince(),
      this.getTags();
      
  },
  async mounted() {
      if (this.$route.query.id) {
          this.parameter = this.$route.query
          // questions 的编辑功能
          const { data:res } = await detail(this.$route.query)
            console.log(res);
            this.ruleForm.subjectID = res.subjectID
            this.ruleForm.catalogID = res.catalogID
            const { data: res1 } = await catalog({
            subjectID: this.ruleForm.subjectID
          });
        // console.log(res);
            this.mygetCatalog = res1
            // this.getCatalog()
            this.ruleForm.cityID = res.city
            this.ruleForm.enterpriseID = res.enterpriseID
            this.ruleForm.provinceID = res.province
            this.ruleForm.questionTypeID = res.questionType - 0
            this.ruleForm.difficultyID = res.difficulty - 0
            this.ruleForm.directionID = res.direction
            this.ruleForm.stemID = res.question
            this.ruleForm.videoID = res.videoURL
            this.ruleForm.remarksID = res.remarks
            this.ruleForm.analysisID = res.answer
            this.ruleForm.radioID = res.questionType
            this.ruleForm.tagID = res.tags.split(",")
            this.items = res.options
            this.myindex = res.options[this.items.length - 1].code
        } 
  },
  methods: {
    // 添加
    addForm() {
      this.$refs.ruleFormRef.validate(valid => {
        if (!valid) return
        add({
            subjectID: this.ruleForm.subjectID,
            catalogID: this.ruleForm.catalogID,
            enterpriseID: this.ruleForm.enterpriseID,
            city: this.ruleForm.cityID,
            direction: this.ruleForm.directionID.toString(),
            questionType: this.ruleForm.questionTypeID.toString(),
            difficulty: this.ruleForm.difficultyID.toString(),
            question: this.ruleForm.stemID,
            options: [],
            answer: this.ruleForm.analysisID,
            tags: this.ruleForm.tagID.toString(),
            province: this.ruleForm.provinceID
        })
      })
    },
    // 修改
    updateForm() {
      this.$refs.ruleFormRef.validate(valid => {
        if (!valid) return
        update({
            id: this.parameter.id - 0,
            videoURL: this.ruleForm.videoID,
            remarks: this.ruleForm.remarksID,
            subjectID: this.ruleForm.subjectID,
            catalogID: this.ruleForm.catalogID,
            enterpriseID: this.ruleForm.enterpriseID,
            city: this.ruleForm.cityID,
            direction: this.ruleForm.directionID.toString(),
            questionType: this.ruleForm.questionTypeID.toString(),
            difficulty: this.ruleForm.difficultyID.toString(),
            question: this.ruleForm.stemID,
            options: [],
            answer: this.ruleForm.analysisID,
            tags: this.ruleForm.tagID.toString(),
            province: this.ruleForm.provinceID
        })
      })
    },
    // 获取标签
    async getTags() {
      const { data: res } = await taglist();
      console.log(res);
      this.mytags = res;
    },
    // 单选多选切换
    chooseQuestion(val) {
        // console.log(val);
      this.ruleForm.questionTypeID = val;
    //   if (val === 1) {
    //       this.items = ["A", "B", "C", "D"]
    //   }
    },
    // 增加选项与答案
    addBtn() {
      var val = String.fromCharCode(this.myindex.charCodeAt(0) + 1);
      this.items.push({code: val});
      this.myindex = val;
    },
    // 获取学科
    async getlist() {
      const { data: res } = await subject();
        this.mylist = res;
    },
    // 获取目录
    async getCatalog() {
        this.ruleForm.catalogID = null
        const { data: res } = await catalog({
            subjectID: this.ruleForm.subjectID
        });
        // console.log(res);
        this.mygetCatalog = res
    },
    // 获取企业
    async getEnterprise() {
      const { data: res } = await companys();
    //   console.log(res);
      this.myenterprise = res.items;
    },
    // 获取省份
    getProvince() {
      const res = provinces();
      // console.log(res);
      this.myprovince = res;
    //   getCity(this.provinceID)
    },
    // 获取城市
    provinceChange(e) {
      //   console.log(e);
      this.mycitys = citys(e);
      //   console.log(this.mycitys)
    },
  },
};
</script>

<style scoped lang="less">
.el-card {
  margin-bottom: 10px;
}

.dashboard-container {
  padding: 10px;
}

.radio-input {
  margin-left: -22px;
  width: 300px;
}

.checkbox-input {
  margin-left: 8px;
  width: 300px;
}
.addbtn {
    background-color: #f26461;
    color: #fff;
}

.submitbtn {
  margin-left: 100px;
}

 /deep/ .el-textarea__inner {
    height: 100px
}
 /deep/ .ql-container {
    height: 200px;
}
/deep/ .quill-editor{
    width: 1200px;
}
</style>
